<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav flex-justify-start">
      <a @click="fn.goHome()" href="javascript:void(0)"
        ><img class="back-btn" src="../../../../static/images/back.png"
      /></a>
      <h1 class="mui-title">组织生活记录</h1>
    </header>

    <div class="flex-between-center record-header">
      <h3 class="flex-center">
        <img src="../../../../static/images/zzsh_title.png" />组织生活记录
      </h3>
      <div
        @click="showTimePicker()"
        id="recordYyear"
        class="year-btn flex-center"
      >
        <span id="recordTimes">{{ year }}</span
        >年
        <img
          class="arrow_icon"
          src="../../../../static/images/select_down.png"
        />
      </div>
    </div>

    <div class="mui-page-content record-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll mui-scroll-wrapper">
          <div class="work-message-lists mui-scroll-wrapper">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div
                    class="work-message-item"
                    v-for="(data, index) in swipeData"
                    :key="data.id"
                  >
                    <div @click="detail(data)">
                      <h2 class="record-item-title">{{ data.typeLabel }}</h2>
                      <div class="flex-between-center record-lists">
                        <div>
                          <h2 class="organization-lists-title">
                            应开展会议次数：<span class="mine-lists-money">{{
                              data.shouldCount
                            }}</span>
                          </h2>
                          <h2 class="organization-lists-title">
                            已开展会议次数：<span>{{ data.alreadyCount }}</span>
                          </h2>
                        </div>
                        <span class="mui-icon mui-icon-arrowright"></span>
                      </div>
                    </div>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <div class="text-center no-data" v-if="swipeData.length===0">
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <noData v-if="swipeData.length === 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部tabbar    start -->
    <footerbar></footerbar>
  </div>
</template>

<script>
import footerbar from "../common/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
      datePicker: "",
      year: new Date().getFullYear(),
      partyGroupId: "",
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    detail(data) {
      this.$store.state.recordListData = data;
      this.$router.push({ path: `/recordList` });
    },
    showTimePicker() {
      if (!this.datePicker) {
        let me = this;
        let nowYear = new Date().getFullYear();
        this.datePicker = this.$createDatePicker({
          columnCount: 1,
          min: new Date(nowYear - 10, 1, 1),
          max: new Date(nowYear + 1, 1, 1),
          value: new Date(me.year, 1, 1),
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.year = new Date(selectedTime).getFullYear();
            this.reloadData();
          },
        });
      }
      this.datePicker.show();
      setTimeout(() => {
        this.datePicker.$updateProps({
          value: new Date(this.year, 1, 1),
        });
      }, 1000);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    reloadData() {
      this.pageIndex = 0;
      this.swipeData = [];
      this.loadData();
    },
    loadData() {
      let statisticsPartyId = this.$localStorage.get("statisticsPartyId") || "";
      let userInfo = this.$store.state.userInfo;
      if (statisticsPartyId !== "") {
        this.partyGroupId = statisticsPartyId;
        this.$localStorage.set("statisticsPartyId", "");
      } else {
        this.partyGroupId = userInfo.partyMemberModel.partyGroupId;
      }
      let data = {
        year: this.year,
        pageIndex: this.pageIndex,
        pageSize: "1000",
        partyGroupId: this.partyGroupId,
      };
      loginService.getPartyMeetPlansData(data).then((res) => {
        if (res.code === 200 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
  },
};
</script>
